<script setup>
import { h, onMounted, reactive, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import useUserStore from '@/stores/user.js';
import { FolderOutlined } from '@ant-design/icons-vue';
import LoginBg from '@/assets/images/login-bg.png';

const userStore = useUserStore();
const route = useRoute();
const router = useRouter();

const redirect = ref('');

watch(
    route,
    (newRoute) => {
        redirect.value = newRoute.query && newRoute.query.redirect;
    },
    { immediate: true },
);

const loading = ref(false);
const formState = reactive({
    username: '',
    password: '',
    remember: false,
});
const onFinish = (values) => {
    loading.value = true;
    userStore
        .login(values)
        .then((routerMenu) => {
            const { data } = routerMenu;
            if (values.remember) {
                localStorage.setItem('user_info', JSON.stringify(formState));
            } else {
                localStorage.removeItem('user_info');
            }
            if (!data.menus || !data.menus.length) {
                router.push('/403');
            } else if (data.menus.find((e) => e.key === 'dashboard')) {
                router.push({ path: redirect.value || '/' });
            } else {
                router.push({ name: data.menus[0].key });
            }
        })
        .catch(() => {
            loading.value = false;
        });
};

onMounted(() => {
    const userInfo = JSON.parse(localStorage.getItem('userInfo'));
    if (userInfo) {
        formState.username = userInfo.username;
        formState.password = userInfo.password;
        formState.remember = userInfo.remember;
    }
});

const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
};
</script>

<template>
    <div class="login">
        <div class="title-block">经济运行分析软件</div>
        <div class="content-block">
            <a-image :src="LoginBg" :preview="false" width="100%" height="100%">
                <template #placeholder>
                    <a-image :src="LoginBg" :preview="false" width="100%" height="100%" />
                </template>
            </a-image>
            <div class="right">
                <div class="title">用户登录</div>
                <a-form
                    :model="formState"
                    name="basic"
                    class="login-card"
                    :labelCol="{ span: 24 }"
                    :wrapperCol="{ span: 24 }"
                    :autocomplete="formState.remember ? 'on' : 'off'"
                    @finish="onFinish"
                    @finishFailed="onFinishFailed"
                >
                    <a-form-item label="账号" name="username" :rules="[{ required: true, message: '请输入账号!' }]">
                        <a-input v-model:value="formState.username" />
                    </a-form-item>

                    <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入密码!' }]">
                        <a-input-password v-model:value="formState.password"></a-input-password>
                    </a-form-item>

                    <a-form-item name="remember" :wrapper-col="{ span: 24 }">
                        <a-checkbox v-model:checked="formState.remember">记住密码</a-checkbox>
                    </a-form-item>

                    <a-form-item :wrapper-col="{ span: 24 }">
                        <a-button type="primary" style="width: 100%" html-type="submit">登录</a-button>
                    </a-form-item>
                </a-form>
            </div>
        </div>
        <!-- background-image: url('@/assets/images/login-bg.png'); -->
    </div>
</template>

<style scoped lang="scss">
.login {
    height: 100vh;
    background-size: cover;
    position: relative;
    :deep(.ant-input-password-icon) {
        svg {
            color: #fff;
        }
    }
    .title-block {
        color: #fff;
        font-family: 'PingFang SC';
        font-size: vh(24px);
        padding: 16px 32px;
        font-style: normal;
        font-weight: 600;
        line-height: 26px;
        background: #000046;
    }
    .content-block {
        height: calc(100% - 58px);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        .right {
            height: vh(360px);
            width: vw(380px);
            box-sizing: border-box;
            background-size: cover;
            font-family: 'PingFang SC';
            position: absolute;
            top: vh(300px);
            left: vw(180px);
            .title {
                color: #fff;
                font-size: vh(24px);
                font-style: normal;
                font-weight: 600;
                text-align: center;
                border-bottom: none;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .login-card {
                margin-top: 32px;
                width: 80%;
                margin-left: 10%;
                :deep(.ant-form-item .ant-form-item-label > label) {
                    color: white !important;
                }
                :deep(.ant-input),
                :deep(.ant-input-password) {
                    background-color: rgba(37, 160, 198, 0.1) !important;
                    border-color: rgba(37, 160, 198, 0.1);
                    color: white;
                    .ant-input {
                        background-color: unset !important;
                    }
                }
                :deep(.ant-checkbox + span) {
                    color: white;
                }
            }
        }
    }
}
</style>
